import React from 'react';
import Chart from 'echarts-for-react';
import { Carousel } from 'antd';
import request from '../../../utils/request';

let data = {
    dataValue: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
    dataValue1: [7.0, 4.9, 43.0, 23.2, 25.6, 6.7, 135.6, 2.2, 32.6, 2.0, 6.4, 3],
    dataValue2: [9.0, 4.9, 7.0, 23.2, 2.6, 76.7, 135.6, 162.2, 32.6, 20.0, 4, 3.3],
    time: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}

class MyLineR extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 1,
            dataList: '',
        };
    }
    componentDidMount() {
        request({
            url: `/web/redstar/cockpitport/waterTreatmentMonitoring`,
            method: 'POST',
            data: { indexArr: ['水温', '易沉固体', '悬浮物', '动植物油', 'PH', 'BOD5', 'COD', '氨氮', '总磷', '总汞', '总镉', '总铬', '六价铬', '总砷', '总铅', '总锌'] }

        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    dataList: data.ret
                })
            }
        })


    }

    //第一组
    setOption = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: ['#70D7FF'],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[0].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['水温',],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[0].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[0].standard:0) ?value.max:Number(data?data[0].standard:0)
                    }
                }
              


            ],
            series: [
                {
                    name: data ? data[0].name : "",
                    type: 'line',
                    showSymbol: false,
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[0].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    yAxisIndex: 0,
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[0].data : []
                }
            ]
        };
        return myOption;
    };

    //第二组
    setOption2 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: [ 'orange',],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[1].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['易沉固体'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[1].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[1].standard:0) ?value.max:Number(data?data[1].standard:0)
                    }
                }
              


            ],
            series: [
                {
                    name: data ? data[1].name : "",
                    type: 'line',
                    showSymbol: false,
                    yAxisIndex: 0,
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[1].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[1].data : []
                },
               
            ]
        };
        return myOption;
    };
     //第三组
     setOption3 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: ['green'],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[2].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['悬浮物'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[2].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[2].standard:0) ?value.max:Number(data?data[2].standard:0)
                    }
                },
               


            ],
            series: [
                {
                    name: data ? data[2].name : "",
                    type: 'line',
                    showSymbol: false,
                   
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[2].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[2].data : []
                },
                
            ]
        };
        return myOption;
    };
     //第四组
     setOption4 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: ['#70D7FF'],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[3].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['动植物油'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[3].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[3].standard:0) ?value.max:Number(data?data[3].standard:0)
                    }
                },
             
               


            ],
            series: [
                {
                    name: data ? data[3].name : "",
                    type: 'line',
                    showSymbol: false,
                  
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[3].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[3].data : []
                },
                
            ]
        };
        return myOption;
    };


    //第五组
    setOption5 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: ['#70D7FF'],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值1 : ${data?data[4].standard:0} <br/> 标准值2 : ${data?data[4].standard2:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['pH',],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[4].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[4].standard:0) ?value.max:Number(data?data[4].standard:0)
                    }
                }

            ],
            series: [
                {
                    name: data ? data[4].name : "",
                    type: 'line',
                    showSymbol: false,
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[4].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                            {
                                yAxis: data?data[4].standard2:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: 'blue', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[4].data : []
                }
            ]
        };
        return myOption;
    };

    //第六组
    setOption6 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: [ 'orange',],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[5].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['BOD5'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[5].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[5].standard:0) ?value.max:Number(data?data[5].standard:0)
                    }
                }
              


            ],
            series: [
                {
                    name: data ? data[5].name : "",
                    type: 'line',
                    showSymbol: false,
                    yAxisIndex: 0,
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[5].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[5].data : []
                },
               
            ]
        };
        return myOption;
    };
     //第七组
     setOption7 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: ['green'],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[6].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['COD'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[6].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[6].standard:0) ?value.max:Number(data?data[6].standard:0)
                    }
                },
               


            ],
            series: [
                {
                    name: data ? data[6].name : "",
                    type: 'line',
                    showSymbol: false,
                   
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[6].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[6].data : []
                },
                
            ]
        };
        return myOption;
    };
     //第八组
     setOption8 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: ['#70D7FF'],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[7].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['氨氮'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[7].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[7].standard:0) ?value.max:Number(data?data[7].standard:0)
                    }
                },
             
               


            ],
            series: [
                {
                    name: data ? data[7].name : "",
                    type: 'line',
                    showSymbol: false,
                  
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[7].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[7].data : []
                },
                
            ]
        };
        return myOption;
    };



     //第九组
     setOption9 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: ['#70D7FF'],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[8].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['总磷'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[8].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[8].standard:0) ?value.max:Number(data?data[8].standard:0)
                    }
                }

            ],
            series: [
                {
                    name: data ? data[8].name : "",
                    type: 'line',
                    showSymbol: false,
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[8].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[8].data : []
                }
            ]
        };
        return myOption;
    };

    //第十组
    setOption10 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: [ 'orange',],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[9].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['总汞'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[9].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[9].standard:0) ?value.max:Number(data?data[9].standard:0)
                    }
                }
              


            ],
            series: [
                {
                    name: data ? data[9].name : "",
                    type: 'line',
                    showSymbol: false,
                    yAxisIndex: 0,
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[9].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[9].data : []
                },
               
            ]
        };
        return myOption;
    };
     //第十一组
     setOption11 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: ['green'],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[10].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['总镉'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[10].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[10].standard:0) ?value.max:Number(data?data[10].standard:0)
                    }
                },
               


            ],
            series: [
                {
                    name: data ? data[10].name : "",
                    type: 'line',
                    showSymbol: false,
                   
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[10].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[10].data : []
                },
                
            ]
        };
        return myOption;
    };
     //第十二组
     setOption12 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: ['#70D7FF'],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[11].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['总铬'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[11].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[11].standard:0) ?value.max:Number(data?data[11].standard:0)
                    }
                },
             
               


            ],
            series: [
                {
                    name: data ? data[11].name : "",
                    type: 'line',
                    showSymbol: false,
                  
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[11].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[11].data : []
                },
                
            ]
        };
        return myOption;
    };




     //第十三组
     setOption13 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: ['#70D7FF'],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[12].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['六价铬'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[12].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[12].standard:0) ?value.max:Number(data?data[12].standard:0)
                    }
                }

            ],
            series: [
                {
                    name: data ? data[12].name : "",
                    type: 'line',
                    showSymbol: false,
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[12].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[12].data : []
                }
            ]
        };
        return myOption;
    };

    //第十四组
    setOption14 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: [ 'orange',],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[13].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['总砷'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[13].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[13].standard:0) ?value.max:Number(data?data[13].standard:0)
                    }
                }
              


            ],
            series: [
                {
                    name: data ? data[13].name : "",
                    type: 'line',
                    showSymbol: false,
                    yAxisIndex: 0,
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[13].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[13].data : []
                },
               
            ]
        };
        return myOption;
    };
     //第十五组
     setOption15 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: ['green'],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[14].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['总铅'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[14].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[14].standard:0) ?value.max:Number(data?data[14].standard:0)
                    }
                },
               


            ],
            series: [
                {
                    name: data ? data[14].name : "",
                    type: 'line',
                    showSymbol: false,
                   
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[14].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[14].data : []
                },
                
            ]
        };
        return myOption;
    };
     //第十六组
     setOption16 = () => {
        let myOption;
        let data = this.state.dataList
        // console.log(data)
        myOption = {
            textStyle: { color: '#FFF' },
            color: ['#70D7FF'],
            tooltip: {
                trigger: 'axis',
                confine:true,
                formatter: function (params) {
                    return ` 编号 : ${data[16].data[params[0].dataIndex]} <br/> ${params[0].seriesName} : ${params[0].data} <br/> 标准值 : ${data?data[15].standard:0} `
                }
                // axisPointer: {
                //     type: 'cross'
                // }
            },
            legend: {

                data: ['总锌'],
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                top: '30%',
                left: '2%',
                right: '6%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data ? data[data.length - 2].data : []
                }
            ],
            yAxis: [

                {
                    axisLine: { lineStyle: { color: '#70D7FF' } },
                    splitLine: { show: false },
                    type: 'value',
                    name: data ? data[15].unit : "",
                    position: 'left',
                    max: function (value) {
                        return value.max > Number(data?data[15].standard:0) ?value.max:Number(data?data[15].standard:0)
                    }
                },
             
               


            ],
            series: [
                {
                    name: data ? data[15].name : "",
                    type: 'line',
                    showSymbol: false,
                  
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 11
                    },
                    markLine: {
                        data: [
                            {
                                yAxis: data?data[15].standard:0, name: '标准值', itemStyle: {
                                    normal: {
                                        color: '#D0C047', type: 'dashed',
                                    }
                                }
                            },
                           
                        ],

                    },
                    areaStyle: {
                        opacity: 0.4
                    },
                    data: data ? data[15].data : []
                },
                
            ]
        };
        return myOption;
    };
    render() {
        return (
            <Carousel autoplay>
                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>
                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption2()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>
                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption3()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>
                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption4()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>

                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption5()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>
                {/* <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption6()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div> */}
                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption7()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>
                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption8()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>

                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption9()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>
                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption10()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>
                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption11()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>
                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption12()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>

                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption13()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>
                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption14()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>
                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption15()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>
                <div style={{ height: "100%" }}>
                    <Chart
                        option={this.setOption16()}
                        notMerge
                        lazyUpdate
                        style={{ height: "20vh" }}
                    />
                </div>
            </Carousel>



        )
    }
}
export default MyLineR;
